<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2-jquery基本使用</title>
		<script type="text/javascript" src="js/jquery2.1.4.min.js"></script>
		<style type="text/css">
			.box{
				width:200px;
				height:200px;
				background:red;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<script type="text/javascript">
			/**
			 * 使用jquery的步骤：
			 * 1.引入jquery库
			 * 2.在script标签对中书写页面加载方法$(function(){});
			 * 3.在$(function(){});里面写方法
			 */
			//原生JS页面加载完成 window.onload=function(){}或者window.addEventListener('load',function(){})
			//Jquery页面加载完成
			$(function(){
				console.log('页面文档准备好了么?');
				//让盒子隐藏
				$('.box').hide();
			});
			
			//如果报错：Uncaught ReferenceError: $ is not defined 
			//原因在于你的jquery库是导入失败的
			
			/**
			 * 这个隐藏盒子为啥是  hide（）
			 * 原因是：现在我们使用的jquery库（是对原生JS的一个封装(相关函数/DOM/BOM...)）
			 * hide()它呢就是jquery库中封装的元素对象隐藏的方法
			 */
		</script>
	</body>
</html>
